<template>
  <view>
    <view class="picker-tap" @click="open">
      <!-- 默认在表单中使用 -->
      <block v-if="useType === 'inForm'">
        <text class="value-text" :style="{ color: pickerValue ? 'rgba(0,0,0,0.80)' : placeholderColor, fontSize: placeholderFontSize }">
          {{ pickerValue || placeholder }}
        </text>
        <slot name="arrow">
          <view v-if="showArrow" class="arrow-icon" :style="{ boxShadow: `-4rpx 4rpx 0 0rpx ${arrowColor} inset` }" />
        </slot>
      </block>
      <!-- 在form表单外使用插槽来实现自定义 -->
      <block v-else>
        <slot name="custom"></slot>
      </block>
    </view>
    <view v-if="showPicker" class="picker-modal"></view>
    <view v-if="showPicker" class="picker-content" :style="{ transform: showPicker ? 'translateY(0)' : 'translateY(100%)' }">
      <view class="picker-header">
        <view v-if="cancelType === 'text'" :style="{ color: cancelColor, fontSize: cancelFontSize, fontWeight: cancelFontWeight }" @click="close">
          取消
        </view>
        <icon v-else type="clear" size="18" @click="close" />
        <view class="packer-title" :style="{ color: titleColor, fontSize: titleFontSize, fontWeight: titleFontWeight }">
          {{ title }}
        </view>
        <view :style="{ color: confirmColor, fontSize: confirmFontSize, fontWeight: confirmFontWeight }" @click="confirmPicker">
          确定
        </view>
      </view>
      <picker-view indicator-style="height: 90rpx;" class="picker-view" @change="changePicker">
        <picker-view-column>
          <view v-for="(item, index) in dataSource" :key="index" class="picker-item" :style="{ fontSize: itemFontSize }">
            {{ item.label }}
          </view>
          <view v-if="dataSource?.length === 0" class="picker-item" :style="{ fontSize: itemFontSize }">暂无数据</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
/**
 *  <view class="cu-form-group">
      <view class="title">单列单项</view>
      <ElPicker
        v-model:value="userInfo.city"
        class="picker"
        title="请选择"
        style="width: 100%;"
        :transfer="{ label: 'key', value: 'value' }"
        :picker-list="[{ key: '选项1', value: '1' }, { key: '选项2', value: '2' }, { key: '选项3', value: '3' }]"
        @change="handleChange"
      />
    </view>

    // 在form表单外使用插槽来实现自定义
    <ElPicker
      useType='outForm'
      v-model:value="userInfo.city"
      class="picker"
      title="请选择"
      style="width: 100%;"
      :transfer="{ label: 'key', value: 'value' }"
      :picker-list="[{ key: '选项1', value: '1' }, { key: '选项2', value: '2' }, { key: '选项3', value: '3' }]"
      @change="handleChange"
    >
      <template #custom>
        自定义内容
      </template>
    </ElPicker>
 */
const emit = defineEmits(['change', 'update:value'])
const props = withDefaults(defineProps<Props>(), {
  useType: 'inForm',
  transfer: {
    label: 'label',
    value: 'value'
  },
  value: '',
  placeholder: '请选择',
  placeholderColor: 'rgba(0,0,0,0.25)',
  placeholderFontSize: '30rpx',
  cancelColor: 'rgba(0,0,0,0.40)',
  cancelType: 'text',
  cancelFontSize: '28rpx',
  cancelFontWeight: 400,
  title: '',
  titleColor: 'rgba(0,0,0,0.80)',
  titleFontSize: '32rpx',
  titleFontWeight: 500,
  confirmColor: '#C70E2D',
  confirmFontSize: '28rpx',
  confirmFontWeight: 400,
  itemFontSize: '32rpx',
  showArrow: true,
  arrowColor: 'rgba(0,0,0,0.25)',
  pickerList: [{ label: '选项1', value: '1' }]
})

interface Props {
  useType?: 'inForm' | 'outForm' // inForm: 在 form 中使用，outForm：不在form 表单中使用
  transfer?: any
  value?: string
  placeholder?: string
  placeholderColor?: string
  placeholderFontSize?: string
  cancelColor?: string // 取消按钮颜色
  cancelType?: string // text显示文字，icon显示图片
  cancelFontSize?: string // 取消文字大小
  cancelFontWeight?: number // 取消文字的字体粗细
  title?: string // 标题文字
  titleColor?: string // 标题文字颜色
  titleFontSize?: string // 标题文字大小
  titleFontWeight?: number // 标题文字的字体粗细
  confirmColor?: string // 确定按钮颜色
  confirmFontSize?: string // 确定文字大小
  confirmFontWeight?: number // 确定按钮的字体粗细
  itemFontSize?: string // 选项文字大小
  showArrow?: boolean
  arrowColor?: string
  pickerList: any // 数据源
}

const showPicker = ref(false)
const pickerValue = ref('')
const pickerValueIndex = ref(0)
const dataSource = ref([])

onMounted(() => {
  pickerValue.value = props.value
  pickerValueIndex.value = 0
  if (props.pickerList) {
    dataSource.value = props.pickerList.map((item) => ({
      ...item,
      label: item[props.transfer.label],
      value: item[props.transfer.value]
    }))
  }
})

watchEffect(async () => {
  dataSource.value =
    props.pickerList.map((item) => ({
      ...item,
      label: item[props.transfer.label],
      value: item[props.transfer.value]
    })) || []
})

const open = () => {
  pickerValueIndex.value = 0
  showPicker.value = true
}

const close = () => {
  showPicker.value = false
  pickerValueIndex.value = 0
}

const changePicker = (e) => {
  pickerValueIndex.value = e.detail.value
}

const confirmPicker = () => {
  const checkedValue = dataSource.value[pickerValueIndex.value]
  pickerValue.value = dataSource.value[pickerValueIndex.value].label
  emit('update:value', dataSource.value[pickerValueIndex.value].label)
  emit('change', checkedValue)
  showPicker.value = false
}
</script>

<style lang="scss" scoped>
.picker-tap {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.value-text {
  flex: 1;
}
.arrow-icon {
  margin-left: 20rpx;
  margin-right: 8rpx;
  width: 24rpx;
  height: 24rpx;
  transform: rotate(45deg);
}
.picker-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.4);
  animation: dropdown1 0.2s linear;
}
.picker-content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2048;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  background-color: #fff;
  transition: all 0.3s;
  animation: dropdown 0.2s linear;
}
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20rpx;
  padding: 20rpx 0;
}
.packer-title {
  text-align: center;
}
.picker-view {
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  height: 490rpx;
  background-color: rgba(255, 255, 255, 1);
}
.picker-item {
  line-height: 70rpx;
  text-overflow: ellipsis;
  text-align: center;
}
@keyframes dropdown {
  0% {
    height: 0;
  }
  100% {
    height: 490rpx;
  }
}
@keyframes dropdown1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
